<template>
  <div class="setter-header">
    <div class="setter-header-left">
      <svg-icon
        @click="handleLayout([layout[0], 0])"
        class="header-left-icon"
        type="editor-collapse"
      />
      <span class="header-left-title">
        {{ title + '配置' }}
      </span>
    </div>
    <div class="setter-header-right">
      <a-popconfirm
        title="确定恢复默认配置吗？"
        @confirm="handleRestore({id: selectStack})"
        placement="bottom"
      >
        <template slot="icon">
          <svg-icon type="home-confirm" />
        </template>
        <svg-icon
          v-if="status == '0' || status == '1'"
          class="header-right-icon"
          type="editor-restore"
        />
      </a-popconfirm>
      <a-popconfirm
        title="确定删除该配置信息吗？"
        @confirm="handleRemove"
        placement="bottom"
      >
        <template slot="icon">
          <svg-icon type="home-confirm" />
        </template>
        <svg-icon
          v-if="status == '0'"
          class="header-right-icon"
          type="editor-remove"
        />
      </a-popconfirm>
    </div>
  </div>
</template>

<script>
import set from '@/mixins/setter';

export default {
  name: 'SetterHeader',
  mixins: [
    set
  ]
}
</script>

<style lang="less" scoped>
@import '~@/styles/vars.less';
.setter-header {
  display: flex;
  padding: 16px 12px;
  box-shadow: 0 1px 0 0 darken(@dark-color, lightness(@dark-color));

  &-left {
    display: flex;
    align-items: center;
    flex: 1;

    .header-left-icon {
      margin-right: 8px;
    }

    .header-left-icon:hover {
      cursor: pointer;
    }
  }

  &-right {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: right;

    .header-right-icon {
      height: 16px;
      margin-left: 12px;
    }

    .header-right-icon:hover {
      cursor: pointer;
    }
  }
}
</style>

<style lang="less">
@import '~@/styles/cover.less';
.ant_popconfirm_reset();
</style>
